<template>
    <div class="app-container bid-bound-view">
        <el-row :gutter="10">
            <el-col :span="24" :xs="24">
                <el-form
                    :model="queryParams.form"
                    ref="QueryFormRef"
                    :inline="true"
                    v-show="dataContainer.showSearch"
                    :label-width="dataContainer.formLabelWidth"
                    class="from-default"
                >
                    <el-row :gutter="10">
                        <el-col :span="6" :xs="6">
                            <el-form-item label="项目名称" prop="bidName">
                                <el-input
                                    v-model="queryParams.form.bidName"
                                    placeholder="请输入"
                                    clearable
                                    @clear="handleQuery"
                                    @keyup.enter="handleQuery"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :xs="6">
                            <el-form-item label="保证金类型" prop="didType">
                                <el-select
                                    v-model="queryParams.form.didType"
                                    placeholder="请选择"
                                    clearable
                                    @clear="handleQuery"
                                    @change="handleQuery"
                                >
                                    <el-option
                                        v-for="dict in bu_did_type"
                                        :key="dict.value"
                                        :label="dict.label"
                                        :value="dict.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :xs="6">
                            <el-form-item label="">
                                <el-button type="primary" color="#BB2735" @click="handleQuery">
                                    查询
                                    <el-icon class="el-icon--right"><Search /></el-icon>
                                </el-button>
                                <el-button icon="Refresh" class="tow-btn" @click="resetQuery">
                                    重置
                                </el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-col>
        </el-row>
        <div class="tableBox content-container">
            <div class="top-container">
                <div class="left" style="margin-bottom: 12px">
                    <el-button class="one-btn" @click="handleApply">
                        申请
                        <el-icon class="el-icon--right"><Plus /></el-icon>
                    </el-button>
                    <el-button class="tow-btn" @click="handleExport">
                        导出
                        <el-icon><Download /></el-icon>
                    </el-button>
                </div>
                <div class="right">
                    <SetupShow
                        v-model:showSearch="dataContainer.showSearch"
                        @queryTable="handleQuery"
                    ></SetupShow>
                </div>
            </div>
            <div class="table-container">
                <el-table
                    v-loading="dataContainer.loading"
                    :data="dataContainer.list"
                    border
                    height="100%"
                    @sort-change="handleSortChange"
                >
                    <el-table-column 
                        fixed="left"
                        type="index" align="center" label="序号" width="80" />
                    <el-table-column
                        label="投标项目名称"
                        align="center"
                        prop="bidName"
                        width="150"
                        show-overflow-tooltip
                    />
                    <el-table-column
                        label="所属市公司"
                        show-overflow-tooltip
                        align="center"
                        prop="cityCompanyName"
                        width="150">
                            <template #default="scope">
                                {{ scope.row.cityCompanyName }}-{{ scope.row.cityCompanyCode }}
                            </template>
                    </el-table-column>
                    <el-table-column
                        label="所属分公司"
                        show-overflow-tooltip
                        align="center"
                        prop="branchCompanyName"
                        width="150">
                            <template #default="scope">
                                {{ scope.row.branchCompanyName }}-{{ scope.row.branchCompanyCode }}
                            </template>
                    </el-table-column>
                    <el-table-column
                        label="申请时间"
                        align="center"
                        prop="createTime"
                        width="150"
                        show-overflow-tooltip
                    />
                    <el-table-column
                        label="收款单位名称"
                        align="center"
                        prop="payeeName"
                        min-width="155"
                        show-overflow-tooltip
                    />
                    <el-table-column
                        label="线索环节"
                        align="center"
                        prop="clueLink"
                        width="100"
                        show-overflow-tooltip
                        sortable="custom"
                        :sort-orders="['descending', 'ascending']"> 
                        <template #default="scope">
                            <dict-tag :options="bu_clue_link" :value="scope.row.clueLink" />
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="申请类型"
                        align="center"
                        prop="didType"
                        width="140"
                    >
                        <template #default="scope">
                            {{getDictItemLabel(bu_did_type,scope.row.didType)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="审批状态"
                        align="center"
                        prop="approvalStatus"
                        width="100"
                    >
                        <template #default="scope">
                            {{getDictItemLabel(bu_approval_status,scope.row.approvalStatus)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="财务处理状态"
                        align="center"
                        prop="financeStatus"
                        width="100"
                    >
                        <template #default="scope">
                            {{getDictItemLabel(bu_finance_status,scope.row.financeStatus)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        align="left"
                        width="120"
                        fixed="right"
                        class-name="small-padding fixed-width"
                    >
                        <template #default="scope">
                            <el-button
                                type="text"
                                v-hasPermi="['basics:course:edit']"
                                @click="handleDetails(scope.row, { isShow: true })"
                            >
                                查看
                            </el-button>
                            <!-- <el-button 
                            type="text" 
                            @click="handleDetails(scope.row)">
                            编辑
                        </el-button>
                        <el-button 
                            type="text" 
                            @click="handleDelete(scope.row)">
                            删除
                        </el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination-container">
                <el-pagination
                    v-show="queryParams.config.total > 0"
                    :total="queryParams.config.total"
                    :background="true"
                    :current-page="queryParams.params.pageNum"
                    :page-size="queryParams.params.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :page-sizes="[10, 20, 30, 50]"
                    :pager-count="7"
                    @size-change="
                        size => {
                            queryParams.params.pageSize = size;
                            getDataList();
                        }
                    "
                    @current-change="
                        page => {
                            queryParams.params.pageNum = page;
                            getDataList();
                        }
                    "
                />
            </div>
            <ApplyDataDialog ref="ApplyDataDialogEl" @onSuccess="getDataList" />
        </div>
    </div>
</template>

<script>
/**
 * 模板页面
 */
import { defineComponent, getCurrentInstance, ref, reactive } from 'vue';
import SetupShow from '@/components/SetupShow';
import ApplyDataDialog from './components/ApplyDataDialog';
import { getDictItemLabel } from '@/common/OtherTools';
import { 
    listBiddingApply as listBiddingApplyApi, 
    delBiddingApply as delBiddingApplyApi,
    exportApi as exportApiBiddingApplyApi,
} from "@/api/finance/bidBond";

export default defineComponent({
    name: 'BidBond',
    components: {
        SetupShow,
        ApplyDataDialog,
    },
    setup() {
        const { proxy: instance } = getCurrentInstance();
        const ApplyDataDialogEl = ref(null); //组件实例
        const QueryFormRef = ref(null); //组件实例
        const queryParams = reactive({
            formLabelWidth:'fit-content',
            form: {},
            params: {
                //基础参数
                pageNum: 1,
                pageSize: 10,
            },
            config: {
                total: 0,
            },
        });
        const dataContainer = reactive({
            loading:false,
            showSearch:true,
            list: [],
        });
        const dictData = instance.useDict('bu_did_type','bu_approval_status','bu_finance_status');
        /** 计算form label的最大宽度 */
        function computedLabelWidth(){
            dataContainer.formLabelWidth = 'fit-content';
            nextTick(()=>{
                const refEl = QueryFormRef.value.$el;
                if(!refEl) return;
                let widthList = [];
                refEl.querySelectorAll('label').forEach(item=>{
                    //防止小数
                    widthList.push(item.clientWidth + 1);
                });
                dataContainer.formLabelWidth = Math.max(...widthList);
            });
        }
        onMounted(()=>{
            computedLabelWidth();
        });
        /** 获取数据列表 */
        function getDataList() {
            dataContainer.loading = true;
            listBiddingApplyApi({
                ...queryParams.form,
                ...queryParams.params,
            })
                .then(res => {
                    dataContainer.list = res.rows || [];
                    queryParams.config.total = res.total;
                })
                .catch(() => {
                    return;
                })
                .finally(() => {
                    dataContainer.loading = false;
                });
        }
        getDataList();
        /** 搜索按钮操作 */
        function handleQuery() {
            queryParams.params.pageNum = 1;
            getDataList();
        }
        /** 重置按钮操作 */
        function resetQuery() {
            instance.resetForm('QueryFormRef');
            handleQuery();
        }
        /** 预付款申请 */
        function handleApply(){
            if (!ApplyDataDialogEl.value) return;
            ApplyDataDialogEl.value.initData(true, {});
        }
        /** 详情按钮点击操作 */
        function handleDetails(row, option) {
            if (!ApplyDataDialogEl.value) return;
            ApplyDataDialogEl.value.initData(true, JSON.parse(JSON.stringify(row)), option);
        }
        /** 删除 */
        function handleDelete(row) {
            instance.$modal
                .confirm('确认删除该数据？')
                .then(() => {
                    dataContainer.loading = true;
                    delBiddingApplyApi(row.id)
                        .then(() => {
                            getDataList();
                        })
                        .catch(() => {
                            return;
                        })
                        .finally(() => {
                            dataContainer.loading = false;
                        });
                })
                .catch(() => {});
        }
        /** 多选操作 */
        function handleSelectionChange(rows) {
            console.log(rows);
        }
        /** 排序触发事件 */
        function handleSortChange(column) {
            queryParams.params.orderByColumn = column.prop;
            queryParams.params.isAsc = column.order;
            getDataList();
        }
        /** 导出数据 */
        function handleExport() {
            instance.download(
                exportApiBiddingApplyApi,
                {
                    ...queryParams.form,
                    ...queryParams.params,
                },
                `数据.xlsx`,
            );
        }
        return {
            dataContainer,
            queryParams,
            handleSortChange,
            getDataList,
            handleQuery,
            resetQuery,
            handleDetails,
            handleDelete,
            handleSelectionChange,
            handleExport,
            getDictItemLabel,
            ApplyDataDialogEl,
            handleApply,
            QueryFormRef,
            ...dictData,
        };
    },
});
</script>

<style lang="scss" scoped>
.bid-bound-view {
    display: flex;
    flex-direction: column;
    > .content-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        > .table-container {
            flex: 1 1 auto;
            height: 0;
            overflow: auto;
        }
    }
    .pagination-container {
        margin-top: 15px;
        display: flex;
        justify-content: flex-end;
        padding: 0;
    }
    :deep(.el-form--inline .el-form-item) {
        width: 100%;
    }
}
</style>

<style scoped>
.eqBox {
    background: #fff;
    padding: 15px 15px 0;
    box-sizing: border-box;
    margin: 0 !important;
}
.tableBox {
    margin-top: 8px;
    background: #fff;
    padding: 15px;
    box-sizing: border-box;
}
.tableBox .top-container {
    display: flex;
    align-content: center;
    justify-content: space-between;
}
</style>
